import { h } from 'hyperapp';
import './index.less';

export default (state, actions) =>
  ({ match }) =>
  (
    <div
      oncreate={actions.onCreate}
      ondestroy={actions.onDestroy}
      key={match.url}
      id="page-help"
      class="mdui-container"
    >
      <article className="markdown-body">
        <h1>使用帮助</h1>
        <p>
          Hi! 欢迎来到<a href="https://hyclub.top">弘毅Club</a>
          ，以下是一些基本操作和介绍。
        </p>
        <h3>创建用户</h3>
        <ol>
          <li>
            点击网站右上角的<code>注册</code>标签，输入一个
            <a href="#email_jump">可用的电子邮件地址</a>
          </li>
          <li>
            点击<code>发送验证码</code>，前往<strong>你的邮箱</strong>
            查看验证码并填入。
          </li>
          <li>
            <p>
              设置用户名和密码：
              <mark>
                确保你的用户名具有特色、易于分辨，密码易于记忆而又不失强度！
              </mark>
            </p>
            <p>
              反例：
              <img
                src="https://hyclub.top/upload/image/2023-11/04/da/daf0551a4f64fee74f3f23ffd61cbb26_release.png"
                alt="反例"
                title="反例"
              />
            </p>
          </li>
          <li>
            登录账号时若出现图形验证码，请记住：图形验证码由5位数字或字母组成，不分大小写。
          </li>
        </ol>
        <h3>编辑信息</h3>
        <blockquote>
          <p>论坛中提供了丰富的个人资料的编辑功能</p>
        </blockquote>
        <h4>更改头像与封面</h4>
        <p>
          头像：在<strong>个人资料</strong>栏中点击头像，选择图片上传
        </p>
        <p>
          封面：将个人资料页拉至最上方，点击{" "}
          <i className="mdui-icon material-icons">photo_camera</i> ，选择图片上传。
        </p>
        <br />
        <p>
          Tip:若出现图片无法上传的情况，请先尝试在
          <a href="https://www.iloveimg.com/zh-cn/compress-image" target="_blank">ILoveIMG</a>
          中对图片进行压缩！
        </p>
        <h4>编辑详细资料</h4>
        <p>
          在个人资料栏点击头像下的
          <i className="mdui-icon material-icons mdui-text-color-theme-icon">
            edit
          </i>
          图标，进行编辑。
        </p>
        <p>
          <mark>[BUG]</mark>:
        </p>
        <p>
          在编辑资料时，隔一段时间所输入的文字就会被重置。请勿惊慌，在没修复之前，你可以试试拼手速。
        </p>
        <h3>发布文章与提问</h3>
        <h4>区别</h4>
        <p>文章表达主观思想；提问正如其名，具有问答的功能。</p>
        <h4>发布流程</h4>
        <ol>
          <li>
            <p>确立主题</p>
            <p>
              想好要发布的内容，进行全方面创作。没记住也没关系，编辑器提供了临时储存草稿的功能。
            </p>
          </li>
          <li>
            <p>选择话题</p>
          </li>
          <li>
            <p>高级创作</p>
            <p>
              说实话目前的自研编辑器确实难用，之后会考虑更换为
              <a href="https://markdown.com.cn/" target="_blank">Markdown</a>语法的编辑器。
            </p>
            <p>
              如果您懂得Markdown，您可以将md文件发送至站长，由站长进行渲染发布！
            </p>
          </li>
        </ol>
        <h3>BUG</h3>
        <p>
          由于论坛目前并不成熟，有错误是在所难免的。我们欢迎大家的批评与纠正，若在使用时遇到了BUG，请发布文章至
          <code>BUGs</code>话题下，尽量做到描述完整清晰，方便我们快速地解决。
        </p>
        <hr />
        <p>
          <a id="email_jump">常见电子邮件地址</a>
        </p>
        <p>理论上来讲任何电子邮箱都可使用，只要保证能正常收信息。</p>
        <p>
          对于 没有/不知道 电子邮箱的用户，可以使用
          <a href="https://mail.qq.com" title="QQ邮箱" target="_blank">
            QQ邮箱
          </a>
          具体格式如<code>你的QQ号@qq.com</code>
          <p>通常，只要你有QQ那默认就拥有一个QQ邮箱。 </p></p>
        <h4>其他常见的邮箱服务：</h4>
        <ul>
          <li>
            <a href="https://mail.163.com" title="网易163邮箱" target="_blank">
              网易163邮箱
            </a>
          </li>
          <li>
            <a href="https://outlook.live.com" title="Outlook" target="_blank">
              Outlook
            </a>
          </li>
          <li>
            <a href="https://www.126.com/" title="网易126邮箱" target="_blank">
              网易126邮箱
            </a>
          </li>
        </ul>
      </article>
    </div>
  );
